<template>
  <div id="main-layout">
    <el-container style="height: 100vh;">
      <!-- 侧边导航 -->
      <el-aside width="220px" class="sidebar" :class="theme">
        <div class="logo">论文智读</div>
        <el-menu :default-active="activeMenu" router class="menu" background-color="#f4f4f4" text-color="#333" active-text-color="#409EFF" @select="handleMenuSelect">
          <el-menu-item index="/upload">上传分析</el-menu-item>
          <el-menu-item index="/history">历史任务</el-menu-item>
          <el-menu-item index="/notes">智读笔记</el-menu-item>
          <el-menu-item index="/help">帮助</el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <!-- 顶部栏 -->
        <el-header class="header" :class="theme">
          <div class="header-content">
            <div class="header-left">
              <h2 class="title">论文智读系统</h2>
            </div>
            <div class="header-right">
              <el-button
                type="success"
                icon="el-icon-refresh"
                size="small"
                style="margin-right: 20px;"
                @click="startNewConversation"
              >
                开始新对话
              </el-button>
              <el-dropdown trigger="click" @command="handleDropdownCommand">
                <span class="el-dropdown-link">
                  <el-avatar :src="avatar" icon="el-icon-user" size="small" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="account">个人设置</el-dropdown-item>
                  <el-dropdown-item command="settings">设置</el-dropdown-item>
                  <el-dropdown-item command="logout" divided>退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>

        <!-- 主内容区 -->
        <el-main class="main-content" :class="theme">
          <router-view />
        </el-main>
      </el-container>

      <!-- 右侧抽屉（实时问答/通知等） -->
      <el-drawer title="实时问答" :visible.sync="drawerVisible" direction="rtl" size="300px">
        <div class="qa-panel">这里显示实时问答内容</div>
      </el-drawer>
    </el-container>

    <!-- 设置弹窗挂在根节点外 -->
    <el-dialog
      title="设置"
      :visible.sync="settingsDialogVisible"
      width="400px"
      :close-on-click-modal="false"
      append-to-body
    >
      <div style="margin-bottom: 20px;">请选择主题模式：</div>
      <el-radio-group v-model="theme" size="small">
        <el-radio-button label="light">亮色模式</el-radio-button>
        <el-radio-button label="dark">暗色模式</el-radio-button>
      </el-radio-group>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'MainLayout',
  data() {
    return {
      drawerVisible: false,
      activeMenu: this.$route.path,
      settingsDialogVisible: false,
      theme: localStorage.getItem('theme') || 'light',
      avatar: ''
    };
  },
  watch: {
    '$route.path'(val) {
      this.activeMenu = val;
    },
    theme(newTheme) {
      localStorage.setItem('theme', newTheme);
    }
  },
  methods: {
    logout() {
      this.$message.success('已登出');
      localStorage.removeItem('currentUser');
      this.avatar = '';
      this.$root.$emit('user-logout');
      if (this.$route.path !== '/account') {
        this.$router.push('/account').catch(() => {});
      }
    },
    startNewConversation() {
      this.$root.$emit('start-new-conversation');
    },
    openSettings() {
      this.settingsDialogVisible = true;
    },
    handleDropdownCommand(command) {
      if (command === 'settings') {
        this.openSettings();
      } else if (command === 'logout') {
        this.logout();
      } else if (command === 'account') {
        if (this.$route.path !== '/account') {
          this.$router.push('/account').catch(() => {});
        }
      }
    },
    handleMenuSelect(index) {
      if (this.$route.path !== index) {
        this.$router.push(index).catch(() => {});
      }
    }
  },
  mounted() {
    this.$root.$on('toggle-drawer', open => {
      this.drawerVisible = open;
    });

    this.$root.$on('update-avatar', avatar => {
      this.avatar = avatar;
    });

    const user = JSON.parse(localStorage.getItem('currentUser'));
    if (user && user.avatar) {
      this.avatar = user.avatar;
    }
  }
};
</script>

<style>
/* 公共布局保持不变 */
.sidebar {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  padding: 20px 0;
  letter-spacing: 2px;
}

.menu {
  width: 100%;
  border-right: none;
}

.header {
  padding: 0 20px;
  height: 60px;
  display: flex;
  align-items: center;
}

.header-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left .title {
  margin: 0;
  font-size: 20px;
}

.header-right {
  display: flex;
  align-items: center;
}

.main-content {
  padding: 20px;
  min-height: calc(100vh - 60px);
  box-sizing: border-box;
  overflow-y: auto;
}

.qa-panel {
  padding: 20px;
  font-size: 14px;
}

/* 明暗模式主题覆盖样式 */
.light {
  background-color: #ffffff !important;
  color: #303133 !important;
}

.dark {
  background-color: #1e1e1e !important;
  color: #e0e0e0 !important;
}

.dark .el-header,
.dark .el-aside,
.dark .el-main {
  background-color: #2a2a2a !important;
  color: #ddd !important;
}

.dark .el-menu,
.dark .el-menu-item {
  background-color: #2a2a2a !important;
  color: #ccc !important;
}
</style>
